<template>
  <div class="userinfo">
    <div class="headMsg">
      <p>
        <span class="infoTag"></span>存证信息
        <el-button
          style="float: right"
          type="primary"
          plain
          :icon="ArrowLeftBold"
          @click="dumpPage">返回</el-button
        >
      </p>
      <div class="box-msg">
        <div class="box-mid"></div>
        <div class="box-list">
          <el-descriptions :column="2" v-for="(item,index) in datainfo" :key="index">
            <el-descriptions-item label="存证名称 :">{{ item.evititle}}</el-descriptions-item
            >
            <el-descriptions-item label="存证类型："
              >{{ item.evitype_id.existingName }}</el-descriptions-item
            >
            <el-descriptions-item label="存证主体 :">{{ item.eviname }}</el-descriptions-item>
            <el-descriptions-item label="身份证 :">未绑定</el-descriptions-item>
            <el-descriptions-item label="文件名称 :">{{ item.wenjian }}</el-descriptions-item
            >
            <el-descriptions-item label="文件类型:">
              <span>.jpg</span>
            </el-descriptions-item>
            <el-descriptions-item label="文件备注 :">无</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <div class="footMsg" v-for="(item,index) in datainfo" :key="index">
      <p><span class="infoTag"></span>链上信息</p>
      <!-- 存在认证信息 -->
      <div class="box-foot" v-if="userInfoMsg.name">
        <el-descriptions :column="2">
          <el-descriptions-item label="存证编号 :"
            >{{ item.evinums }}</el-descriptions-item
          >
          <el-descriptions-item label="存证状态:"
            >{{ item.evistate }}</el-descriptions-item
          >
          <el-descriptions-item label="存证时间">{{ item.evidate }}</el-descriptions-item
          >
          
          <el-descriptions-item label="存证用户:">{{ item.user_id.username}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import html2canvas from "html2canvas"; //生成 存证画布
import Clipboard from 'clipboard' 
import { ArrowLeftBold } from "@element-plus/icons-vue";
import { reactive, toRefs,onMounted,ref } from "vue";
import { useRouter,useRoute } from "vue-router";
import axios from "axios";
const router = useRouter();
const route=useRoute()
const dumpPage = () => {
  router.push("/console/existing");
};
let datainfo=ref()
const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  squareUrl:
    "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
  sizeList: ["small", "", "large"] as const,
});
const { circleUrl } = toRefs(state);
const userInfoMsg = reactive({ name: "zs" }); // 存放用户信息

function showinfo() {
  let id=route.query.id  
  axios.get("/api/cunzheng/existid?id="+id).then((res) => {
    datainfo.value=res.data.data
    console.log(datainfo,'info');
  });
}
onMounted(() => {
  showinfo();
});
</script>

<style scoped>
.userinfo {
  padding: 62px 123px;
  background-color: #fff;
}

.footMsg {
  margin-top: 65px;
}

.infoTag {
  padding: 1px 2px;
  margin-right: 5px;
  background-color: #0079fe;
}

.box-msg {
  width: 95%;
  margin-top: 20px;
  padding: 20px 35px;
  border: 1px solid rgb(233, 233, 233);
  display: flex;
}

.box-pic {
  width: 10%;
}

.box-word {
  text-align: center;
}

.box-mid {
  width: 3%;
}

.box-list {
  width: 87%;
}

.box-foot {
  width: 95%;
  min-height: 150px;
  margin-top: 20px;
  padding: 20px 35px;
  border: 1px solid rgb(233, 233, 233);
}

.editIcon {
  cursor: pointer;
  position: relative;
  left: 180px;
  vertical-align: middle;
}

/* 头像 */
.demo-basic {
  text-align: center;
}

.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.demo-basic .block {
  flex: 1;
}

.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

/* 身份证 */
.demo-image {
  display: inline-block;
}

.demo-image .block {
  padding: 10px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image .block:last-child {
  border-right: none;
}

.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>